import {XgPlayer} from "./index";
import {$} from "./utils/dom";

export class XgPosterBtn {
  posterPlayBtnEl!: HTMLElement;
  constructor(private player: XgPlayer) {
    this.init();
  }
  private init() {
    const { posterEl } = this.player.config;
    if (posterEl) {
      const el = $(posterEl);
      if (el) {
        this.posterPlayBtnEl = el;
        this.bindClick();
        return;
      }
    }
    this.posterPlayBtnEl = document.createElement('div');
    this.posterPlayBtnEl.className = 'poster-play-btn-wrap';
    this.posterPlayBtnEl.innerHTML = `<svg class="icon icon-poster-player" aria-hidden="true">
            <use xlink:href="#icon-play"></use>
          </svg>`;
    this.player.container.appendChild(this.posterPlayBtnEl);
    this.bindClick();
  }
  toggle(display: 'block' | 'none') {
    this.posterPlayBtnEl.style.display = display;
  }
  bindClick() {
    this.posterPlayBtnEl.addEventListener('click', () => {
      this.player.emitter.emit('play');
    });
  }
}
